<template>
  <ul>
    <li v-for="v in models" :key="v._id">
      <w-cell
        :icon="v.cover"
        :title="v.name"
        :describe="v.date | DateFormat"
        :operation-width="100"
        :detail="v.describe"
        :hover="false"
      >
        <template slot="option">
          <a-button type="link" size="small" @click="restoreBtnClick(v)">
            还原
          </a-button>
          &nbsp;
          <a-button type="link" size="small" @click="removeBtnClick(v)">
            删除
          </a-button>
        </template>
      </w-cell>
    </li>
  </ul>
</template>

<script>
import { Admin } from '@/config/api'
import WCell from '@/components/global/cell/cell_00'
export default {
  name: 'AdminRecyclePackage',
  layout: 'admin',
  components: {
    WCell
  },
  async asyncData ({ app }) {
    const { $wAxios } = app
    const data = await $wAxios.$get(Admin.product.dustbinList)
    return { models: data }
  },
  methods: {
    /**
     * 还原按钮点击
     */
    restoreBtnClick (item) {
      this.$wAxios
        .$get(`${Admin.product.dustbinRestore}${item._id}`)
        .then(() => {
          this.$message.success('还原成功')
          this.reload()
        })
        .catch(() => {})
    },
    /**
     * 删除按钮点击
     * @param item
     */
    removeBtnClick (item) {
      this.$wRemovePop(() => {
        return this.$wAxios.$delete(`${Admin.product.dustbinDelete}${item._id}`)
      }, item.title).then(() => {
        this.reload()
      })
    },
    reload () {
      this.$wAxios
        .$get(Admin.product.dustbinList)
        .then((data) => {
          this.models = data
        })
        .catch(() => {})
    }
  },
  head () {
    return {
      title: '回收站-作品'
    }
  }
}
</script>

<style scoped></style>
